<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <title>学生成绩管理系统|登录</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/host.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/animate.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/validator-0.7.3/jquery.validator.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/sweetalert/sweetalert.css">
    <script src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/validator-0.7.3/jquery.validator.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/validator-0.7.3/local/zh_CN.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/host.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript">
        $(function () {
            createCode();
        })

        function createCode() {

            fetch("<%=request.getContextPath()%>/user/createCode", {
                method: 'POST',
                responseType: 'blob'
            }).then(res => {
                return res.blob();
            }).then(result => {
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(result);
            });

        }

        function login() {
            var userid = document.getElementById("userid").value;
            var password = document.getElementById("password").value;
            var list = document.getElementsByName("inlineRadioOptions");
            var code = document.getElementById("code").value;
            var admin = null;
            if (!list[0].checked && !list[1].checked && !list[2].checked) {
                return;
            }
            for (var i = 0; i < list.length; i++) {
                if (list[i].checked) {
                    admin = list[i].value;
                }
            }

            $.ajax({
                type: "POST",
                data: "userId=" + userid + "&password=" + password + "&admin=" + admin + "&code=" + code,
                dataType: "json",
                url: "<%=request.getContextPath()%>/user/loginyanzheng",
                success: function (result) {

                    if (result.status === 0) {
                        swal("哦豁", result.msg, "error");
                    } else {
                        swal({title: "太帅了", text: "登录成功，进入系统！", type: "success"},
                            function () {
                                location.href = "/StuSystem/user/index";
                            });
                    }
                }
            });
        }
    </script>
    <style>
        body {
            background: url("<%=request.getContextPath()%>/images/loginback.png");
        }

        .back {
            text-align: center;
            background: url("<%=request.getContextPath()%>/images/bg1.png");
            color: dodgerblue;
        }

        .login-box {

            background: white;
            height: 300px;
            width: 400px;
            position: absolute;
            right: 20%;
            bottom: 30%;
        }
    </style>
</head>
<body>
<div class="middle-box text-center loginscreen ">

    <div class="back">
        <div class="login-box">
            <h3 style="font-size: 30px;">选课系统-登陆</h3>
            <form class="animated rollIn form-horizontal"
                  data-validator-option="{theme:'yellow_top',stopOnError:true}">
                <div class="form-group">
                    <label for="userid" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"
                               data-rule="用户名:required;digits" id="userid">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" data-rule="密码:required;password"
                               id="password">
                    </div>
                </div>

                <div class="form-group">
                    <label for="code" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-10">
                        <input id="code" class="form-control" style="width: 60%;display: inline;" type="text"
                               data-rule="验证码:required;digits">
                        <img height="40px" width="40px" alt="验证码" id="img">
                        &nbsp;&nbsp;
                        <a onclick="createCode()">重新获取</a>
                    </div>
                </div>

                <fieldset>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" data-rule="checked">
                        管理员
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> 教师
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3"> 学生
                    </label>
                </fieldset>
                <br/>
                <br/>
                <button type="submit" style="    background-color: #2196f3;
    border-color: #2196f3;
    color: #FFF;
    width: 20%;
    margin-left: 80px;"
                        class="btn btn-primary block " onclick="login();">登 录
                </button>
            </form>
            <br/>
            <br/>
        </div>
    </div>
</div>

</body>
</html>
